<template>
	<view class="home">
		<view class="input" @click="getSerch"><van-icon name="search" size="20" class="icon" /></view>

		<view class="content">
			<!-- tab -->
			<van-tabs @click="isShow" color="#FB7299" title-active-color="#FB7299">
				<van-tab title="热门" name="1"></van-tab>
				<van-tab title="追番" name="2"></van-tab>
			</van-tabs>
		</view>
		<!-- 热门 -->
		<van-skeleton title :row="6" :loading="isloading" v-if="show">
			<view class="list">
				<view class="item" @click="goVideoDetails(item.uid)" v-for="item in list" :key="item.uid">
					<view class="left">
						<image :src="item.img" mode=""></image>
						<view class="time">{{ item.VideoLength }}</view>
					</view>
					<view class="right">
						<view class="title">{{ item.title }}</view>
						<view class="right-a">
							<view class="video">
								<view class="video-a">{{ item.name }}</view>
								<view class="video-b">
									<view class="">
										<van-icon name="live" size="14" />
										{{ item.playback }}
									</view>
									<view class="b">{{ item.VideoDate }}</view>
								</view>
							</view>
							<view class="share"><van-icon name="share" size="20" /></view>
						</view>
					</view>
				</view>
			</view>
		</van-skeleton>
		<!-- 每日更新 -->
		<view class="chase" v-else>
			<view class="a">
				<van-tabs @click="gettoUpdateList" :active="time" line-height="0rpx">
					<van-tab title="六" :name="7"></van-tab>
					<van-tab title="日" :name="1"></van-tab>
					<van-tab title="一" :name="2"></van-tab>
					<van-tab title="二" :name="3"></van-tab>
					<van-tab title="三" :name="4"></van-tab>
					<van-tab title="四" :name="5"></van-tab>
					<van-tab title="五" :name="6"></van-tab>
				</van-tabs>
			</view>
			<view class="chase-list">
				<view class="item" @click="goVideoDetails(item.uid)" v-for="item in toUpdateList" :key="item.uid">
					<image :src="item.img" mode=""></image>
					<view class="title van-multi-ellipsis--l2">{{ item.title }}</view>
					<text class="van-ellipsis">{{ item.name }}</text>
				</view>
			</view>
			<!-- 索引 -->
			<view class="indexes">
				<view class="indexes-title">
					<view class="left">索引</view>
					<view class="right">
						查看更多
						<van-icon name="arrow" />
					</view>
				</view>
				<view class="indexes-list">
					<view class="item" v-for="(item, i) in sortList" :key="i">{{ item }}</view>
				</view>
			</view>
			<view class="sell">
				<view class="title">番剧推荐</view>
				<view class="sell-list">
					<view class="item" v-for="item in list2" :key="item">
						<view class="image"><image :src="item.img" mode=""></image></view>
						<view class="content">
							<view class="title1 van-multi-ellipsis--l2">{{ item.title }}</view>
							<text>全33话</text>
						</view>
					</view>
				</view>
				<view class="change" @click="getChange(1)">
					<text style="margin-left: 10rpx;">换一换</text>
				</view>
			</view>
			<view class="sell">
				<view class="title">国创推荐</view>
				<view class="sell-list">
					<view class="item" v-for="item in list3" :key="item">
						<view class="image"><image :src="item.img" mode=""></image></view>
						<view class="content">
							<view class="title1 van-multi-ellipsis--l2">{{ item.title }}</view>
							<text>全33话</text>
						</view>
					</view>
				</view>
				<view class="change" @click="getChange(2)">
					<text style="margin-left: 10rpx;">换一换</text>
				</view>
			</view>
		</view>
		<view style="height: 30rpx;"></view>
	</view>
</template>

<script setup>
// vue3小程序生命周期函数
import { onShareAppMessage, onLoad, onShow, onHide } from '@dcloudio/uni-app'
import { videoListApi, cateChannelApi, cateFanjuApi } from '@/api/modules/home.js'
import { addhistorvyApi } from '@/api/modules/history.js'
import { HistoryStore } from '@/store/history.js'
import { reactive, toRefs } from 'vue'
const historyStore = HistoryStore()

const arr = reactive( {
	active: 2,
})

const state = reactive({
	list: [],
	list2: [],
	list3: [],
	toUpdateList: [],
	show: true,
	isloading: false,
	time: null,
	sortList: ['搞笑', '热血', '奇幻', '励志', '萌系', '运动']
})


const isShow = e => {
	e.detail.name == 1 ? (state.show = true) : (state.show = false)
}
// 跳转视频详情页
const goVideoDetails = async (id) => {
	const token = uni.getStorageSync('token')
	const uid = token ? token.rows2[0].uid : 1
	console.log(uid);
	historyStore.getHistory({uid, Videoid: id})
	uni.navigateTo({
		url: `/subpkg/details/details?uid=${id}`
	})
}

// 跳转搜索页
const getSerch = id => {
	uni.navigateTo({
		url: `/subpkg/Search/Search`
	})
}


// 换一换
const getChange =  async (e) => {
	const id = Math.floor(Math.random()*5+1)
	const res = await cateFanjuApi(id)
	e === 1 ? state.list2 = res.message : state.list3 = res.message
}

// 视频列表
const VideoList = async () => {
	const { data } = await videoListApi()
	data.map(item => {
		item.playback = item.playback / 10000 >= 1 ? Math.round(item.playback / 10000) + '万' : item.playback
		item.VideoDate = item.VideoDate ? item.VideoDate.slice(5) : ''
		let m = Math.floor(item.VideoLength / 60)
		let ss = item.VideoLength % 60
		m += ''
		ss += ''
		m = m.length == 1 ? '0' + m : m
		ss = ss.length == 1 ? '0' + ss : ss
		item.VideoLength = m + ':' + ss
	})
	state.list = data
}

const gettoUpdateList = e => {
	state.time = e.detail.name
	cateChanne()
}

const cateFanju = async () => {
	const res = await cateFanjuApi(2)
	state.list3 = res.message
}

// 每日跟新
const cateChanne = async () => {
	state.isloading = true
	if(state.time == 0) state.time = 1
	console.log(state.time);
	const { data } = await cateChannelApi(state.time)
	state.toUpdateList = data.splice(0, 8)
	const res = await cateFanjuApi(1)
	state.list2 = res.message
	cateFanju()
	state.isloading = false
}

// 页面加载
const init = () => {
	const time2 = new Date()
	state.time = time2.getDay()+1
	VideoList()
	cateChanne()
}
onLoad(message => {
	init()
})

// 页面显示
onShow(() => {})

// 页面隐藏
onHide(() => {})

// 页面分享(不定义该函数 页面将无法分享)
onShareAppMessage(() => {
	
})

const { active } = toRefs(arr)
const { list, show, time, toUpdateList, sortList, isloading, list2, list3 } = toRefs(state)
</script>

<style lang="scss">
.home {
	.input {
		height: 70rpx;
		background-color: #f4f4f4;
		margin: 0 30rpx;
		border-radius: 40rpx;
		display: flex;
		align-items: center;
		.icon {
			margin-left: 20rpx;
			background-color: #f4f4f4;
		}
	}
	.list {
		.item {
			display: flex;
			padding: 20rpx 20rpx;
			position: relative;
			border-top: 1rpx solid #e7e7e7;
			.left {
				image {
					width: 280rpx;
					height: 200rpx;
					border-radius: 10rpx;
				}
				.time {
					position: absolute;
					bottom: 30rpx;
					left: 241rpx;
					color: #fff;
					padding: 0 6rpx;
					font-size: 20rpx;
				}
			}
			.right {
				flex: 1;
				margin-left: 20rpx;
				font-size: 26rpx;
				.title {
					font-size: 30rpx;
					height: 120rpx;
				}
				.right-a {
					display: flex;
					justify-content: space-between;
					align-items: center;
					color: #999;
					.video {
						width: 250rpx;
						.video-b {
							display: flex;
							align-items: center;
							justify-content: space-between;
							padding-top: 10rpx;
						}
					}
				}
			}
		}
	}
	.chase {
		border-top: 1rpx solid #e7e7e7;
		.tabs {
			color: #000;
			background-color: #000;
		}

		.a {
			.van-tab--active {
				background-color: #fb7299;
				border-radius: 34rpx;
				color: #fff;
				height: 70rpx;
				line-height: 70rpx;
				margin-top: 10rpx;
				border-bottom: 0;
			}
		}

		.chase-list {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			padding: 20rpx 20rpx;
			.item {
				display: flex;
				flex-wrap: wrap;
				width: 160rpx;
				margin-top: 20rpx;
				image {
					border-radius: 8rpx;
				}
				image {
					width: 160rpx;
					height: 160rpx;
				}
				.title {
					width: 160rpx;
					font-size: 30rpx;
				}
				text {
					margin-top: 10rpx;
					color: #999;
				}
			}
		}
		.indexes {
			margin-top: 20rpx;
			border-top: 1rpx solid #e7e7e7;
			.indexes-title {
				padding: 30rpx 20rpx;
				font-size: 28rpx;
				display: flex;
				justify-content: space-between;
				.right {
					color: #999;
				}
			}
			.indexes-list {
				padding: 0 20rpx;
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				justify-content: space-between;
				.item {
					margin-bottom: 20rpx;
					width: 220rpx;
					height: 100rpx;
					background-color: #e7e7e7;
					border-radius: 6rpx;
					font-size: 32rpx;
					text-align: center;
					line-height: 100rpx;
				}
			}
		}
		.sell {
			padding: 0 20rpx;
			margin-bottom: 20rpx;
			border-top: 1rpx solid #e7e7e7;
			.title {
				padding: 30rpx 0 0 0;
				font-size: 28rpx;
			}
			.change {
				display: flex;
				align-items: center;
				margin: 20rpx 0 20rpx 280rpx;
				color: #fb7299;
				image {
					width: 40rpx;
					height: 40rpx;
					display: block;
				}
				.animation{
					transform: rotateZ(360deg);
				}
			}
			.sell-list {
				display: flex;
				align-items: center;
				justify-content: space-between;
				.item {
					height: 400rpx;
					margin-top: 30rpx;
					.image {
						image {
							width: 220rpx;
							height: 280rpx;
						}
					}
					.content {
						.title1 {
							width: 220rpx;
							font-size: 30rpx;
						}
						text {
							padding-top: 20rpx;
							color: #999;
						}
					}
				}
			}
		}
	}
}
</style>
